<template>
  <Drawer
      title="初始化组件相关文件"
      v-model="visible"
      width="450"
      :mask-closable="false"
      :styles="$PnUtil.buildDrawerStyleByHasFooter()">
    <Form ref="form" :label-width="100" :model="formData" :rules="ruleValidate">
      <FormItem label="组件文件名" prop="componentName">
        <Alert show-icon :style="{paddingRight: '10px', textAlign: 'justify'}">
          新创建的组件的文件名必须在项目中没有与其同名的其他组件，在定义之前最好在工程中全局搜索确认一下。
        </Alert>
        <Input v-model="formData.componentName" placeholder="请输入组件文件名"/>
      </FormItem>
      <FormItem label="组件别名" prop="componentName">
        <Alert show-icon :style="{paddingRight: '10px', textAlign: 'justify'}">
          组件命名定义组件的备注名称，在组件主文件中显示于顶部注释的名称。
        </Alert>
        <Input v-model="formData.componentAliasName" placeholder="请输入组件别名"/>
      </FormItem>
      <FormItem label="组件类别" prop="componentType">
        <Alert show-icon :style="{paddingRight: '10px', textAlign: 'justify'}">
          创建组件之前，需要确认您创建的这个组件是属于什么类型的组件，PageNow中有两种大类型的组件，分别为普通功能组件与Echarts图表组件，
          所有非Echarts图表组件，都可以归类为普通功能组件，然而Echarts图表组件下还分支有Echarts3D图表组件，这个按需选择即可。
        </Alert>
        <Select transfer v-model="formData.componentType">
          <Option v-for="item in componentTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </FormItem>
      <FormItem label="根目录" prop="rootFolder">
        <Alert show-icon :style="{paddingRight: '10px', textAlign: 'justify'}">
          根目录在项目【src/components/functional】目录下定义，PageNow中，所有的组件都存放于functional目录下，而此根目录定义组件文件夹存放的上级目录名称，
          假设根目录定义为default，则组件的所有相关文件所在的文件夹则在default目录下创建。
        </Alert>
        <Input v-model="formData.rootFolder" placeholder="请输入根目录"/>
      </FormItem>
    </Form>
    <DrawerFooter>
      <Button class="m-r-5px" @click="visible = false">关闭</Button>
      <Button type="primary" @click="initCompFiles" :loading="loading">执行</Button>
    </DrawerFooter>
  </Drawer>
</template>

<script>
export default {
  name: 'CompFileForm',
  data() {
    return {
      visible: false,
      loading: false,
      componentTypes: [
        {label: '普通功能组件', value: 'general'},
        {label: 'Echarts图表组件', value: 'echarts'},
        {label: 'Echarts3D图表组件', value: 'echarts3D'},
      ],
      formData: {
        componentName: '',
        componentAliasName: '',
        componentType: '',
        rootFolder: ''
      },
      ruleValidate: {
        componentName: [
          {required: true, message: '组件文件名不能为空', trigger: 'blur'}
        ],
        componentType: [
          {required: true, message: '组件类型不能为空', trigger: 'blur'}
        ],
        rootFolder: [
          {required: true, message: '根目录不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  mounted() {

  },
  methods: {
    init() {
      this.visible = true
      this.$refs.form.resetFields()
    },
    initCompFiles() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          let formData = Object.assign({}, this.formData);
          this.$PnApi.CompUtilApi.createCompFiles(
              formData.componentName,
              formData.componentAliasName,
              formData.componentType,
              formData.rootFolder).then(result => {
            if (result.data.success) {
              this.visible = false
              this.$Message.success('组件相关文件初始化操作执行完毕，请在开发环境控制台查看执行结果。');
              this.$emit("refreshDataList")
            }
            this.loading = false
          })
        }
      });
    },
  },
  computed: {}
}
</script>

<style scoped>

</style>
